

<script setup lang="ts">

import YButton from "../../../Button/jsxButton/src/index"
import { Events, h, ref,reactive } from "vue"
// import { def } from "@vue/shared"

interface Options {
    field?: string,
    confirmBtnText?: string,
    showCancelBtn?: boolean,
    cancelBtnText?: string,
    title?: string,
    content?: string
}

let visible = ref(false)
let btnType = ref("confirm")
let promptValue = ref("")
let state = reactive({
    visible:false,
    btnType:"confirm",
    promptValue:''
})

let props = withDefaults(defineProps<Options>(), {
    field: "confirm",
    confirmBtnText: "ok",
    showCancelBtn: false,
    cancelBtnText: "cancel",
    title: "Message",
    content: "show MessageBox"
})

const setVisible = <T extends boolean>(val: T) => {

    state.visible = val

}

const cancelMassageBox = () => {
    state.btnType = "cancel"
    setVisible(false)
}

const confirmMessageBox = () => {
    state.btnType = "confirm"
    // console.log(type.value)
    setVisible(false)
}

defineExpose({
    setVisible,
    state
})

// 小组件
const ContentView = ({ field }: any) => {
    switch (field) {
        case !field || "confirm":
            return h("p", null, props.content)
        case "prompt":
            return h("input", {
                value: state.promptValue,
                onInput: (e: any) => state.promptValue = e.target.value,
                class:"message-input"
            })
        default:
            return ""
    }
}

</script>

<template>
    <transition name="fade">
        <div v-show="state.visible" class="box">
            <div class="mask">
                <div class="title">
                    <div class="text">
                        {{ props.title }}
                    </div>
                    <div @click="cancelMassageBox" class="iconfont icon-close">

                    </div>
                </div>
                <div class="content">
                    <!-- <div class="container">
                        {{ content }}
                    </div> -->
                    <content-view :field="props.field"></content-view>

                </div>
                <div class="btns">
                    <y-button v-if="props.showCancelBtn" @click="cancelMassageBox">
                        {{ props.cancelBtnText }}
                    </y-button>
                    <y-button type="primary" @click="confirmMessageBox">
                        {{ props.confirmBtnText }}
                    </y-button>
                </div>
            </div>
        </div>
    </transition>
</template>

<style scoped lang="scss">
.fade-enter-active {
    transition: opacity 0.2s ease-in;
}

.fade-leave-active {
    transition: opacity 0.2s ease-out;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.box {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
    color: #fff;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
   
    .mask {
        min-width: 420px;
        // min-height: 135px;
        // height: 100%;
        background-color: #fff;
        color: #000;
        border-radius: 4px;
        position: relative;

        .title {
            display: flex;
            justify-content: space-between;
            padding: 15px 15px 10px;

            .iconfont {
                cursor: pointer;

                &:hover {
                    color: #409eff;
                }
            }
        }

        .content {
            padding: 10px 15px;
            font-size: 14px;
        }
        .message-input{
            border: none;
            outline: none;
            width: 100%;
            border: 1px solid #ddd;
            height: 32px;
            box-sizing:border-box;

        }

        .btns {
            // position: absolute;
            // right: 0;
            // bottom: 0;
            margin-bottom: 10px;
            width: 100%;
            display: flex;
            justify-content: flex-end;
            box-sizing: border-box;
            padding: 5px 15px 0;

            .mar {
                margin-right: 10px;
            }

            :nth-child(1) {
                margin-right: 5px;
            }
        }

    }
}</style>